/* eslint-disable */
<template>
  <div class="login-container row items-center justify-center">
    <q-form @submit="submit" class="layui-form" style="width: 380px;">
      <div class="cc-login-form-item">
        <div class="title">后台管理系统注册</div>
        <div class="desc"></div>
      </div>
      <div class="cc-login-form-item">
        <q-input
          outlined
          v-model.trim="form.name"
          dense
          debounce="500"
          lazy-rules
          placeholder="账号："
          hide-bottom-space
          bg-color="white"
          square
          :rules="[(val) => (val && val.length > 5) || '请输入用户名，大于6个字符']"
        >
        </q-input>
      </div>
      <div class="cc-login-form-item">
        <q-input
          outlined
          v-model.trim="form.mobile"
          dense
          debounce="500"
          lazy-rules
          placeholder="手机号码："
          hide-bottom-space
          bg-color="white"
          square
          :rules="[(val) => (val && val.length > 10) || '请输入正确的手机号码']"
        >
        </q-input>
      </div>
      <div class="cc-login-form-item" style="width:200px;">
        <q-input
          outlined
          v-model.trim="form.check_code"
          dense
          debounce="500"
          lazy-rules
          placeholder="手机验证码："
          hide-bottom-space
          bg-color="white"
          square
          :rules="[(val) => (val && val.length > 10) || '请输入正确的验证码']"
        >
        </q-input>
      </div>
      <div class="cc-login-form-item">
        <q-input outlined clear-icon="cancel" :type="isPwd ? 'password' : 'text'" v-model.trim="form.password" dense
          bg-color="white" placeholder="密码："  debounce="500" hide-bottom-space lazy-rules square :rules="[(val) => (val && val.length > 7) || '请输入八位以上密码，包含大小写，数字。']"
        >
          <template v-slot:append>
            <q-icon
              :name="isPwd ? 'visibility_off' : 'visibility'"
              class="cursor-pointer"
              @click="isPwd = !isPwd"
            />
          </template>
        </q-input>
      </div>
      <div class="cc-login-form-item">
        <q-input
          outlined
          clear-icon="cancel"
          :type="isPwd ? 'password' : 'text'"
          v-model.trim="form.repassword"
          dense
          bg-color="white"
          placeholder="再次输入密码："
          debounce="500"
          hide-bottom-space
          lazy-rules
          square
          :rules="[(val) => (val && val.length > 7) || '请输入八位以上密码，包含大小写，数字.']"
        >
          <template v-slot:append>
            <q-icon
              :name="isPwd ? 'visibility_off' : 'visibility'"
              class="cursor-pointer"
              @click="isPwd = !isPwd"
            />
          </template>
        </q-input>
      </div>


      <div class="cc-login-form-item">
        <q-btn
          dense
          unelevated
          label="注 册"
          size="17px"
          color="green-5"
          class="full-width no-border-radius q-pa-none"
          type="submit"
          :loading="loading"

        >
          <template v-slot:loading>
            <q-spinner-ios class="on-left" />注 册...
          </template>
        </q-btn>
      </div>
      <div class="cc-login-form-item" style="">
        <q-btn color="grey-5" @click="go_login" label="登录" />
      </div>
    </q-form>
  </div>
</template>

<script>
import { uid } from "quasar";
import menuItem from 'boot/menuItem';
export default {
  name: "Login",
  data() {
    return {
      title: process.env.PRODUCT_NAME,
      uid: 0,
      form: {
        name: "",
        password: "",
        captcha: "",
        repassword: "",
        check_code: ''
      },
      isPwd: true,
      autoLogin: true,
      loading: false,
    };
  },
  methods: {
    go_login(){
      this.$router.push('/login')
    },
    imTr(menu) {
      const result = [];
      menu.forEach((v) => {
        result.push({
          ...v,
          component: () => import(`pages/${v.component}`),
          children: v.children ? this.imTr(v.children) : null,
        });
      });
      return result;
    },
    initMenu(menuInfo) {
      let { menu } = menuInfo;
      const { auth } = menuInfo;
      if (menu.length === 0) {
        this.$error("您没有任何可供访问的菜单，请联系管理员");
      }
      this.$store.commit("Rule/updateRoutes", menu);
      this.$store.commit("Rule/updateAuth", auth);
      menu = this.imTr(menu);
      this.$router.addRoute({
        path: "/",
        component: () => import("layouts"),
        redirect: "/home",
        children: menu,
      });
    },
    submit() {
      const loginData = {};
      loginData.username = this.form.name;
      loginData.password = this.form.password;
      if (this.form.repassword != this.form.repassword) {
        this.$info( '两次输入的密码不一致' +r.msg);
        return false
      }
      try {
        this.$axios.post('/appregister',loginData).then((r) => {
          if (r.code == 0) {
            this.uid = r.data
            this.$info( '登录' +r.msg);
            this.submit2();
            return false;
          } else {
            this.$error(r.msg);
            return false;
          }
        });
      } catch (error) {
        this.$error('登录失败!!!');
        return false;
      }

    },
    submit2() {
      // this.loading = true;

      //本地登录
      let token =
        "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2ODYyMTM5MTksInVzZXJuYW1lIjoiZ3Vlc3QifQ.9pxaHS-Nr-h2NlRGbVmX3kRZCS2K2COUDf-t974MFeY";
      let userInfo = {
        id: this.uid,
        username: "guest",
        realname: "游客",
        userRoleNames: null,
        userRoleIdList: null,
        avatar: "https://cdn.quasar.dev/logo/svg/quasar-logo.svg",
        birthday: null,
        sex: 1,
        email: "guest@163.com",
        phone: null,
        orgCode: null,
        status: 1,
        delFlag: 0,
        workNo: null,
        post: null,
        telephone: null,
        createBy: "admin",
        createTime: "2021-01-15 10:36:18",
        updateBy: "guest",
        updateTime: "2021-04-14 02:33:32",
        activitiSync: null,
        userIdentity: null,
        departIds: null,
        thirdId: null,
        thirdType: null,
      };
      let permissionInfo = {
        allAuth: [
          {
            action: "maintain:add",
            describe: "添加",
            type: "0",
            status: "1",
          },
          {
            action: "maintain:edit",
            describe: "编辑",
            type: "0",
            status: "1",
          },
          {
            action: "maintain:delete",
            describe: "删除",
            type: "0",
            status: "1",
          },
          {
            action: "maintain:export",
            describe: "导出",
            type: "0",
            status: "1",
          },
        ],
        auth: [
          {
            action: "maintain:delete",
            describe: "删除",
            type: "0",
          },
          {
            action: "maintain:add",
            describe: "添加",
            type: "0",
          },
          {
            action: "maintain:edit",
            describe: "编辑",
            type: "0",
          },
          {
            action: "maintain:export",
            describe: "导出",
            type: "0",
          },
        ],
        menu:menuItem

      };
      this.$store.commit("Rule/clear");
      this.$store.commit("User/updateAuthorization", token);
      this.$store.commit("User/updateInfo", userInfo);
      this.initMenu(permissionInfo);
      this.$router.push("/home");
      //////////本地登录结束

    },
    captcha() {
      this.form.checkKey = uid();

    }
  },
  mounted() {
    // if (this.$store.state.User.authorization) {
    //   this.$router.replace("#/home");
    // } else {
    //   this.$store.commit("User/clear");
    // }
    //this.captcha();
  },
  computed: {},
};
</script>

<style lang="stylus">
.login-container
width 100%
height 100vh
          background-image url('~assets/login/background.svg')
background-repeat no-repeat
background-size 100% 100%
position relative

.layui-form {
  width: 320px ;
}

.layui-form button {
  width: 100% ;
  height: 44px ;
  line-height: 44px ;
  font-size: 16px ;
  font-weight: 550 ;
}

.layui-tab-content {
  margin-top: 15px ;
  padding-left: 0px ;
  padding-right: 0px ;
}

.cc-login-form-item {
  margin-top: 20px ;
}
.cc-login-form-item .q-btn__wrapper {
  padding: 0em;
}

.layui-input {
  height: 44px ;
  line-height: 44px ;
  padding-left: 15px ;
  border-radius: 3px ;
}

.layui-input:focus {
  box-shadow: 0px 0px 2px 1px #5FB878 ;
}

.layui-form-danger:focus{
  box-shadow: 0px 0px 2px 1px #f56c6c ;
}

.logo {
  width: 60px ;
  margin-left: 20px ;
  transform: translateY(-6000px);
  filter: drop-shadow(#FF9933 0 6000px)
}

.title {
  font-size: 30px ;
  font-weight: 550 ;
  margin-left: 20px ;
  color: #5FB878 ;
  display: inline-block ;
  height: 60px ;
  line-height: 60px ;
  margin-top: 10px ;
  position: absolute ;
}

.desc {
  width: 100% ;
  text-align: center ;
  color: gray ;
  height: 60px ;
  line-height: 60px ;
}

body {
  background-repeat:no-repeat;
  background-color: whitesmoke;
  background-size: 100%;
  height: 100%;
}

.code {
  float: left;
  margin-right: 13px;
  margin: 0px ;
  border: #e6e6e6 1px solid;
  display: inline-block;
}

.codeImage {
  float: right;
  width: 160px;
  height: 42px;
  border: #781a1a 2px solid;
}
</style>
